<template>
  <view class="page">
    <!-- 顶部栏：显示来源与筛选提示 -->
    <view class="header">
      <text class="title">商品列表</text>
      <view class="sub">
        <text v-if="query.keyword">关键词：{{ query.keyword }}</text>
        <text v-else-if="query.categoryId">分类：{{ query.categoryId }}</text>
        <text v-else>全部商品</text>
      </view>
    </view>

    <!-- 商品网格列表 -->
    <view class="goods-grid" v-if="list.length">
      <view class="goods-item" v-for="item in list" :key="item.id" @click="goDetail(item.id)">
        <image :src="item.image" class="goods-image" mode="aspectFill" />
        <view class="goods-info">
          <text class="goods-name">{{ item.name }}</text>
          <view class="goods-price">
            <text class="current-price">¥{{ item.price }}</text>
            <text class="original-price" v-if="item.original_price">¥{{ item.original_price }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空态 -->
    <view class="empty" v-else>
      <uv-empty mode="list" icon="https://cdn.uviewui.com/uview/common/empty/list.png" text="暂无商品" />
    </view>

    <!-- 分页加载状态 -->
    <view class="pager">
      <text v-if="loading">加载中...</text>
      <text v-else-if="!hasMore && list.length">没有更多了</text>
    </view>
  </view>
  
</template>

<script setup>
// 使用中文注释，变量/函数使用英文
import { ref, reactive, getCurrentInstance } from 'vue'
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { goodsApi } from '../../api/index.js'

const { proxy } = getCurrentInstance()

// 查询条件（从路由解析）
const query = reactive({ keyword: '', categoryId: '' })

// 列表与分页状态
const list = ref([])
const page = ref(1)
const pageSize = ref(10)
const hasMore = ref(true)
const loading = ref(false)

// 初始化或重置
const reset = () => {
  page.value = 1
  hasMore.value = true
  list.value = []
}

// 加载数据
const load = async () => {
  if (!hasMore.value || loading.value) return
  loading.value = true
  try {
    const params = { page: page.value, page_size: pageSize.value }
    if (query.keyword) params.keyword = query.keyword
    if (query.categoryId) params.category_id = query.categoryId
    const res = await goodsApi.searchGoods(params)
    const rows = (res && (res.list || res.data?.list)) || []
    if (rows.length < pageSize.value) {
      hasMore.value = false
    }
    list.value = list.value.concat(rows)
    page.value += 1
  } finally {
    loading.value = false
  }
}

// 进入详情
const goDetail = (id) => {
  proxy?.$navigateTo?.(`/pages/goods/detail?id=${id}`)
}

// 生命周期
onLoad((options) => {
  // 解析路由参数 keyword / categoryId / id
  query.keyword = options?.keyword || ''
  query.categoryId = options?.categoryId || options?.id || ''
  reset()
  load()
})

onReachBottom(() => {
  load()
})

onPullDownRefresh(async () => {
  reset()
  await load()
  uni.stopPullDownRefresh()
})
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  padding: 24rpx; // 页面统一外边距
  background-color: $uni-bg-color-grey;
}

.header {
  background: #fff;
  padding: 22rpx 26rpx; // 稍微收紧
  border-radius: 20rpx;
  box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.06);
  margin-bottom: 16rpx;

  .title {
    font-size: 32rpx;
    color: #333;
    font-weight: 600;
  }
  .sub {
    margin-top: 8rpx;
    font-size: 24rpx;
    color: #999;
  }
}

.goods-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx; // 卡片间距
}

.goods-item {
  background: #fff;
  border-radius: 20rpx; // 圆角统一
  overflow: hidden;
  border: 1rpx solid $uni-border-color;
  box-shadow: 0 8rpx 22rpx rgba(0,0,0,0.05);
}

.goods-image {
  width: 100%;
  height: 300rpx;
}

.goods-info {
  padding: 18rpx 16rpx 20rpx; // 信息区更舒展

  .goods-name {
    font-size: 28rpx;
    color: #333;
    overflow: hidden;
    display: -webkit-box; // 两行省略
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 10rpx;
  }

  .goods-price {
    .current-price {
      font-size: 30rpx;
      color: $uni-color-primary;
      font-weight: 600;
      margin-right: 10rpx;
    }
    .original-price {
      font-size: 24rpx;
      color: #aaa;
      text-decoration: line-through;
    }
  }
}

.empty {
  margin: 80rpx 0 40rpx; // 空态居中留白
}

.pager {
  text-align: center;
  color: #999;
  font-size: 24rpx;
  padding: 16rpx 0 20rpx;
  margin-top: 6rpx;
  padding-bottom: env(safe-area-inset-bottom);
}
</style>
